<template>
	<div id="mainportal" class="container" style="background-color: #fff;">

		<comhead title="我的" isLeftIcon="true" leftIconName="angle-left" @leftClick="foBack()" isRightIcon="true" rightIconName="ellipsis-h" @rightClick="updataActive()"></comhead>

		<div class='info' @click='goUserInfo'>
			<div style='margin:5px 10px 5px 0;  display: flex;align-items: center;'>
				<img :src="userInfo.iconUrl === '' ||
       !userInfo.iconUrl?'https://api-merchant.nanxinwang.com/bapi/upload/20180202/file5a73d36ddb573c3b069f1a4a.jpg':userInfo.iconUrl" style='height:50px;width:50px;border-radius: 25px' />
			</div>
			<div style='flex:1;'>
				<span>{{userInfo.nickName === '' ||
       !userInfo.nickName?userInfo.loginName:userInfo.nickName}}</span>
			</div>

			<img src='../../image/back.png' style="width:20px;height:20px;margin:13px ;" />
		</div>

		<div class="column-item" @click="goRecord" v-if="li_module && role == 'OWNER'">
			<span>养护记录</span>
			<i class="iconfont icon-jiantou"></i>
		</div>
		<!---->
		<div class="column-item" @click="gouploadRecord" v-if="li_module && role =='REPAIR'">
			<span>养护上传</span>
			<i class="iconfont icon-jiantou"></i>
		</div>

		<!-- bindscrolltolower="searchScrollLower" -->
		<div style="width:100%;height:100vh;background-color:#f5f5f5; border-top: 1px solid #e5e5e5;" v-if="!li_module">
			<div class='address' @click='addressList'>
				<div>
					<img src='../../image/like1@2x.png' style='width:25px; height:25px;margin: 15px 10px 15px 0  ;' />
				</div>
				<div v-if="!haveAdd" style='flex:1'>
					<div>请选择一个地址</div>
				</div>
				<div v-else style='flex:1;overflow:hidden;'>
					<div style=' padding: 10px 0;'>
						<div style='font-weight: 800;'>
							<span style='margin-right:10px;'>{{defaultAddress.contactname}}</span>
							<span>{{defaultAddress.contactmobile}}</span>
						</div>
						<div style='font-size:14px;white-space:nowrap;overflow:hidden;text-overflow: ellipsis;'>
							<span style='margin:0 2px'>{{defaultAddress.province}}</span>
							<span style='margin:0 2px'>{{defaultAddress.city}}</span>
							<span style='margin:0 2px'>{{defaultAddress.country}}</span>
							<span>{{defaultAddress.address}}</span> </div>
					</div>
				</div>
				<div> <img src='../../image/back.png' style="width:20px;height:20px;margin:8px;" /></div>
			</div>
			
			<div 
				class="column-item" 
				@click="goConstruction" 
				style="border-top: 1px solid #e5e5e5; "
				v-if="qds_module && (role == 'REPAIR' || role == 'PARTS' || role == 'REPAIRMAN')">
				<span>施工现场</span>
				<i class="iconfont icon-jiantou"></i>
			</div>
			<div class="column-item" @click="goTenanceList" v-if="qds_module && (role == 'REPAIR' || role == 'PARTS' || role == 'REPAIRMAN')" >
				<span>养护上传</span>
				<i class="iconfont icon-jiantou"></i>
			</div>
			<!---->
			
			<div class="column-item" @click="goOrderList" v-if="qds_module && $store.getters.getMerchant.basicMall">
				<span>订单管理</span>
				<i class="iconfont icon-jiantou"></i>
			</div>

			<div v-if="$store.getters.getMerchant.basicMall && !qds_module" style='height:10px;border-top: solid 1px #e5e5e5;border-bottom: solid 1px #e5e5e5;'>
			</div>

			<div style='background-color:#fff;font-size:28rpx;' class='formBox' v-if="!qds_module">

				<div v-if="$store.getters.getMerchant.basicMall" :class="[tabIndex === '0' ?'tabBox_select':'' ,'tabBox']" :style="tabIndex === '0' ?'border-right:solid 1px #e5e5e5':''" @click="changeTabIndex('0')">
					<span>订单记录</span>
				</div>

				<div :class="[tabIndex === '1' ?'tabBox_select':'', 'tabBox']" :style="tabIndex === '1'&&$store.getters.getMerchant.basicMall ?'border-left:solid 1px #e5e5e5;':''" @click="changeTabIndex('1')">
					<span>维修记录</span>

				</div>

			</div>

			<ul v-infinite-scroll="loadMore" :infinite-scroll-disabled="loading" infinite-scroll-distance="20" v-if="tabIndex==='0' && !qds_module">

				<li v-for="item in orderList" v-if="$store.getters.getMerchant.basicMall" style='  background-color:#fff;border-bottom: solid 1px #e5e5e5;'>
					<div class='orderItem' @click='goOrderDetail(item.orderId)'>
						<!-- data-orderid='{{item.orderId}}' -->
						<div style='color:#999999;display:flex;font-size:14px;justify-content: space-between;padding:5px 0;'>
							<div>
								<span v-if="item.orderStatus === 'ORDER_WAIT_PAY'" style='color:rgb(246, 175, 42)'>待付款</span>
								<span v-if="item.orderStatus === 'ORDER_WAIT_SENDGOODS'" style='color:#3f9ded'>待发货</span>
								<span v-if="item.orderStatus === 'ORDER_CANCEL_PAY'" style='color:#999'>已关闭</span>
								<span v-if="item.orderStatus === 'ORDER_WAIT_RECVGOODS'" style='color:#28b8a6'>待收货</span>
								<span v-if="item.orderStatus === 'ORDER_WAIT_REdiv'">待评论</span>
								<span v-if="item.orderStatus === 'ORDER_END_GOODS'" style='color:#12b72b'>已完成</span>
							</div>
							<div>{{item.createTime}}</div>
						</div>

						<div style='font-size:14px;'>
							<div style='display:flex;background-color:#f7f7f7;align-items: center;' v-if="item.detailList.length===1">
								<img :src="item.detailList[0].goodsIcon" style='width:50px;height:50px;margin:5px;' />
								<div style='margin-left:10px;'>
									<div>
										{{item.detailList[0].goodsName}}<span v-if="item.detailList[0].goodsModelNumber!=''||item.detailList[0].goodsModelNumber">({{item.detailList[0].goodsModelNumber}})</span>
									</div>
								</div>
							</div>
							<div scroll-x="true" v-else>
								<div style='display:flex; justify-content: flex-start;flex-wrap: nowrap;align-items: center;    overflow: auto;'>
									<div v-for="itemName in item.detailList">
										<img :src="itemName.goodsIcon" style='width:50px;height:50px;margin:5px;' />
									</div>
								</div>
							</div>
						</div>
						<div style='padding:5px 0;display:flex;align-items:center;justify-content: flex-end;'>
							<div style='font-size:14px;'>
								共
								<span>{{item.detailList.length}}</span>款商品 合计：
								<span style='color:#e51c23'>￥{{item.payTotal}}</span>
							</div>
						</div>
					</div>
				</li>
			</ul>

			<ul v-infinite-scroll="loadMore" :infinite-scroll-disabled="loading" infinite-scroll-distance="20" v-if="tabIndex==='1'">

				<li v-for="item in recordList" style='  background-color:#fff;border-bottom: solid 1px #e5e5e5;'>

					<div class='orderItem'>

						<div style='display:flex;font-size:14px;justify-content: space-between;padding:5px 0;'>
							<div>
								<span><span style='color:#999999;'>维修里程：</span><span>{{item.maintenanceMileage}}</span> <span style='color:#999999;'>公里</span></span>
							</div>
							<div style='color:#999999;'>{{item.maintenanceDate}}</div>
						</div>
						<div style='display:flex;flex-wrap: wrap'>
							<img v-for="(catfun,index) in item.maintenanceImg.split(',')" v-if="catfun" @click="getImg(item.maintenanceImg.split(','),index)" :src='catfun' style='height:50px;width:50px;margin:0 10px 10px 0;' />
						</div>
						<div style='height:75px;background-color:#f5f5f5;font-size:13px;overflow:auto;padding:5px;'>
							{{item.maintenanceContent}}

						</div>

						<div style='padding:5px 0;display:flex;align-items:center;justify-content: flex-end;'>
							<div style='font-size:14px;'>
								收费合计：
								<span style='color:#e51c23'>￥{{item.maintenanceFee}}</span>
							</div>
						</div>

					</div>

				</li>
			</ul>

			<div v-if="!qds_module" style="display: flex;
    align-items: center;
    justify-content: center;font-size:14px;padding:15px;">

				<div v-if="loading">加载中...</div>
				<div v-else>-</div>

			</div>
		</div>

	</div>
</template>

<script>
	import { Toast, Swipe, SwipeItem, Switch, MessageBox } from "mint-ui";
	import { Indicator } from "mint-ui";
	import { Tabbar, TabItem } from "mint-ui";
	import { TabContainer, TabContainerItem } from "mint-ui";
	import comhead from "../../common/coffee/Comhead";

	export default {
		data() {
			return {
				tabIndex: "0",
				loading: false,
				userInfo: {},
				haveAdd: false,
				defaultAddress: [],
				orderList: [],
				pageSize: 0,
				pageSizeRecord: 0,
				repageSize: 0,
				recordList: [],
				rantrecordType: 1,
				li_module: false,
				qds_module: false,
				role: '',
			};
		},
		computed: {},

		methods: {
			getImg(imgurl, index) {
				WeixinJSBridge.invoke("imagePreview", {
					"urls": imgurl,
					"current": imgurl[index] //默认显示
				})
			},
			changeTabIndex(tabIndex) {
				this.tabIndex = tabIndex;
			},
			goRecord() {
				this.$router.push("/record");
			},
			gouploadRecord() {
				this.$router.push("/uploadRecord");
			},
			// 施工现场
			goConstruction() {
				this.$router.push({
					name: "construction",
					query: this.userInfo.loginName
				})
			},
			goOrderList() {
				this.$router.push({
					name: "order-list",
					query: this.userInfo.loginName
				})
			},
			// 养护上传列表
			goTenanceList() {
				this.$router.push({
					name: "tenance_list"
				})
			},
			loadMore() {
				console.log("刷新");
				this.loading = true;

				let self = this;
				setTimeout(() => {
					if(self.tabIndex === "0") {
						self.getOrderList(self.repageSize);
					} else {
						self.getMaintenance();
					}
					self.loading = false;
				}, 1000);
			},
			addressList() {
				this.$router.push("/addlist");
			},
			goOrderDetail(orderid) {
				this.$router.push({
					name: "orderdetail",
					query: {
						orderid: orderid
					}
				});
			},
			//取地址
			getAddress() {
				let self = this;
				let url = this.$baseUrl.bizUrl + "/address/defaultaddress";
				let data = {
					token: this.$store.getters.getLoginStatus.token,
					userId: this.$store.getters.getLoginStatus.userId
				};
				let callBack = res => {
					if(res == null) {
						console.log("网络请求错误！");
						return;
					}

					if(res.data.status != 200) {
						console.log("请求数据错误" + url);
						return;
					}
					if(res.data.status === 200) {
						if(res.data.data.address) {
							(this.defaultAddress = res.data.data), (this.haveAdd = true);
						} else {
							this.haveAdd = false;
						}
					}
				};
				this.$reqFormPost(url, data, callBack);
			},
			goUserInfo() {
				this.$router.push("/userInfo");
			},
			getOrderList(pageSize) {
				pageSize || this.pageSize;
				// !pageSize  ?pageSize = this.pageSize:''
				let self = this;
				let url = this.$baseUrl.bizUrl + "/order/queryorder";
				let data = {
					token: this.$store.getters.getLoginStatus.token,
					userId: this.$store.getters.getLoginStatus.userId,
					// orderStatus
					page: pageSize,
					pageSize: 20
				};
				let callBack = res => {
					if(res == null) {
						console.log("网络请求错误1！");
						return;
					}

					if(res.data.status != 200) {
						console.log("请求数据错误1");
						return;
					}

					if(res.data.status == 200) {
						console.log(res.data);

						let goodsList = [];

						if(res.data.data.goodsList.length != 0) {
							self.orderList.length > 0 ? (goodsList = self.orderList) : "";
							res.data.data.goodsList.forEach((item, index) => {
								goodsList.push(item);
							});
							this.repageSize += 1;
						} else {
							this.rantrecordType = 2;
							return;
						}

						this.orderList = goodsList;
					}
				};
				this.$reqFormPost(url, data, callBack);
			},
			getUserInfo() {
				let self = this;
				let url = this.$baseUrl.bizUrl + "/user/info";
				let data = {
					token: this.$store.getters.getLoginStatus.token,
					userId: this.$store.getters.getLoginStatus.userId
				};
				let callBack = res => {
					if(res == null) {
						console.log("网络请求错误1！");
						return;
					}

					if(res.data.status != 200) {
						console.log("请求数据错误1");
						return;
					}

					if(res.data.status == 200) {
						console.log("用户信息", res.data.data);
						this.userInfo = res.data.data;
						this.$store.commit("setLoginName", this.userInfo.loginName)
					}
				};
				this.$reqFormPost(url, data, callBack);
			},
			goSign() {
				this.$router.push({
					name: "sign"
				});
			},
			foBack() {
				this.$router.go(-1);
			},
			getMaintenance() {
				console.log("获取维修记录列表");

				let self = this;
				let url = this.$baseUrl.bizUrl + "/maintenance/record/listbyuser";
				let data = {
					token: this.$store.getters.getLoginStatus.token,
					userId: this.$store.getters.getLoginStatus.userId,
					page: this.pageSizeRecord,
					pageSize: 20
				};
				let callBack = res => {
					if(res == null) {
						console.log("网络请求错误！");
						return;
					}

					if(res.data.status != 200) {
						console.log("请求数据错误" + url);
						return;
					}
					if(res.data.status === 200) {
						console.log("维修记录", res.data);
						if(res.data.data.list.length != 0) {
							res.data.data.list.forEach((item, index) => {
								this.recordList.push(item)
							})
							this.pageSizeRecord += 1;
						} else {
							console.log("来了");
							this.rantrecordType = 2;
							return;
						}
					}
				};
				this.$reqFormPost(url, data, callBack);
			}
		},
		mounted() {
			if(this.$store.getters.getMerchant.merchantId == 'Mer5af261c3db573c5063f0fdf4' ) {
				this.li_module = true
			}
			
			if(this.$store.getters.getMerchant.merchantId == 'Mer5b10b6cedb573c72d45b5c03' ) {
				
				this.qds_module = true
			}
			let str = JSON.parse(window.localStorage.getItem('LoginStatus'))
			this.role = str.role
			document.title = "我的";
			this.getUserInfo();
			this.getAddress();
			this.getOrderList();
			this.getMaintenance();
		},
		components: {
			Tabbar,
			TabItem,
			TabContainer,
			TabContainerItem,
			comhead,
			Swipe,
			SwipeItem
		}
	};
</script>
<style>
	.container {
		height: 100vh;
		width: 100%;
		/* background-color: #f5f5f5; */
	}
	
	.column-item {
		width: 100%;
		height: 60px;
		font-size: 14px;
		line-height: 60px;
		padding: 0 20px;
		position: relative;
		background: #fff;
		box-sizing: border-box;
		border-bottom: 1px solid #e5e5e5;
	}
	
	.icon-jiantou {
		right: 15px;
		font-size: 14px !important;
		color: #999;
		position: absolute;
	}
	
	.btn-items {
		width: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10px 0;
		font-size: 14px;
	}
	
	.orderItem {
		margin-left: 20px;
		padding-right: 20px;
	}
	
	.weui-loadmore {
		/* margin:10px auto; */
	}
	/* example/me/me.wxss */
	
	.weui-loadmore__tips_in-line {
		background-color: #f5f5f5;
	}
	
	.address {
		background-color: #fff;
		display: flex;
		font-size: 16px;
		padding: 10px 10px 10px 20px;
		align-items: center;
		justify-content: space-between;
		/* border:15px solid transparent;
  border-image: url('../../image/xian.png ') 30 30 round; */
	}
	
	.info {
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px 0 10px 20px;
	}
	
	.page__bd {
		background-color: #fff;
	}
	
	.address {
		display: flex;
		font-size: 16px;
	}
	
	.orderList {
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: #fff;
		font-size: 32rpx;
	}
	/* .weui-navbar{
    position: fixed;
    top:110px;
    width: 100%;
    background-color: #fff;
  } */
	
	.weui-navbar__item.weui-bar__item_on {
		color: #000;
	}
	
	.weui-navbar__slider {
		background-color: #000;
		height: 3rpx;
	}
	
	.order_box {
		flex: 1;
		text-align: center;
		padding: 10px 0;
		font-size: 14px;
	}
	
	.order_box:active {
		background-color: #f3f3f3;
	}
	
	.bg_shop {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 0;
		z-index: 999;
		background-color: rgba(0, 0, 0, 0.498039);
		height: 100vh;
		width: 100%;
	}
	
	.modiaBoxUp {
		width: 70%;
	}
	
	.options_address {
		border-bottom: solid 1px #e5e5e5;
		font-size: 16px;
		text-align: center;
		padding: 10px 0;
	}
	
	.tabBox {
		width: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 50px;
		border-bottom: 1px solid #e5e5e5;
		box-sizing: border-box;
	}
	
	.tabBox_select {
		border-top: 5px #1973bf solid;
		border-bottom: 1px solid #fff;
		border-right: solid 1px #e5e5e5;
	}
	
	.formBox {
		display: flex;
	}
</style>

<!-- Add "scoped" attribute to limit CSS to this component only -->